#state_SettingState{
  $colorCategoryButton: #eeeff5;
  $colorCategoryButtonSelected: $colorBlueBright;

  .container .content{
    display: grid;
    grid-template-columns: auto 1fr;
    @include S(grid-gap, 10px);
    @include S(padding, 10px);

    @include onPe{
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
    }

    .sidebar{
      @include S(grid-gap, 3px);
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;

      @include onPe{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        @include S(grid-gap, 5px);

        button{
          @include S(height, 30px);
        }
        .other{
          @include S(grid-gap, 5px);
          display: grid;
          margin-top: 0 !important;
          grid-template-columns: 1fr 1fr 1fr;
          grid-column: 1 / 4;
        }

        .versionbar{
          display: none !important;
        }
      }

      button{
        text-align: left;
        &::after{
          content: unset;
        }
        box-sizing: border-box;
        width: 100%;
      }

      .other{
        align-self: end;
        margin-top: auto;

        button{
          margin-top: 5px;
        }
      }

      button{
        background-color: $colorCategoryButton;
        color: #777a7f;
        box-shadow: unset;
        border: unset;

        &.active{
          background-color: $colorCategoryButtonSelected;
          color: #fff;

          &:hover{
            opacity: 1;
          }
        }

        &.pressed{
          transform: none !important;
        }
      }

      .versionbar{
        @include S(margin-top, 10px);

        @include SuperSmallText;
        display: grid;
        align-items: center;
        grid-template-columns: 1fr auto;
        .buildVersion{
          display: flex;
          flex-direction: column;
          color: #aaadaf;
        }
      }
    }

    .categoryContainer{
      overflow-y: scroll;
      pointer-events: all;
      @include S(padding-right, 10px);

      .category{
        display: none;
        &.active{
          display: block;
        }

        .setting{
          @include S(padding, 10px);
          background: #eeeff5;
          @include S(border-radius, $globalBorderRadius);
          @include S(margin-bottom, 5px);

          .desc{
            @include S(margin-top, 5px);
            @include SuperSmallText;
            color: #aaadb2;
          }

          .row{
            display: grid;
            align-items: center;
            grid-template-columns: 1fr auto;

            label{
              text-transform: uppercase;
              @include PlainText;
            }
          }

          &.disabled{
            pointer-events: none;
            *{
              pointer-events: none !important;
              cursor: default !important;
            }
            position: relative;
            .onlyHint{
              @include PlainText;
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              pointer-events: all;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(#fff, .5);
              text-transform: uppercase;
              color: $colorRedBright;
            }
          }

          .value.enum{
            background: #fff uiResource('icons/selector.png') calc(100% - #{D(5px)}) calc(50% + #{D(1px)}) / #{D(15px)} no-repeat;
            &:hover{
              background-color: #fafafa;
            }
          }
        }
      }
    }
  }
}